<template>
  <view class="container">
    <!-- 背景装饰 -->
    <view class="bg-pattern"></view>
    
    <!-- 品牌头部区域 -->
    <view class="brand-header">
      <view class="brand-icon">
        <text class="icon">📱</text>
      </view>
      <view class="brand-info">
        <text class="app-name">SmartUI</text>
        <text class="page-desc">创建新账户</text>
      </view>
    </view>
    
    <!-- 注册表单卡片 -->
    <view class="form-card">
      <!-- 注册表单 -->
      <view class="form-container">
        <view class="input-group">
          <view class="input-label">用户名</view>
          <input 
            type="text" 
            v-model="username" 
            placeholder="请设置用户名" 
            class="input-field"
            :class="{ 'input-focused': focusedInput === 'username' }"
            @focus="onInputFocus('username')"
            @blur="onInputBlur('username')"
          />
        </view>
        
        <view class="input-group">
          <view class="input-label">密码</view>
          <input 
            type="password" 
            v-model="password" 
            placeholder="请设置密码（6-16位）" 
            class="input-field"
            :class="{ 'input-focused': focusedInput === 'password' }"
            @focus="onInputFocus('password')"
            @blur="onInputBlur('password')"
          />
        </view>
        
        <view class="input-group">
          <view class="input-label">确认密码</view>
          <input 
            type="password" 
            v-model="confirmPassword" 
            placeholder="请确认密码" 
            class="input-field"
            :class="{ 'input-focused': focusedInput === 'confirmPassword' }"
            @focus="onInputFocus('confirmPassword')"
            @blur="onInputBlur('confirmPassword')"
          />
        </view>
        
        <!-- 协议勾选 -->
        <view class="agreement">
          <checkbox-group>
            <label>
              <checkbox value="agree" color="#3b82f6" />
              <text class="agreement-text">我已阅读并同意</text>
              <text class="agreement-link" @click="showAgreement">《用户协议》</text>
              <text class="agreement-text">和</text>
              <text class="agreement-link" @click="showPrivacy">《隐私政策》</text>
            </label>
          </checkbox-group>
        </view>
        
        <button class="btn register-btn" @click="handleRegister">
          <text class="btn-text">创建账户</text>
        </button>
        
        <view class="link-container">
          <text>已有账号？</text>
          <text class="link" @click="navToLogin">立即登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: '',
      focusedInput: ''
    };
  },
  methods: {
    onInputFocus(field) {
      this.focusedInput = field;
    },
    onInputBlur(field) {
      if (this.focusedInput === field) {
        this.focusedInput = '';
      }
    },
    handleRegister() {
      // 表单验证逻辑保持不变
      if (!this.username) {
        uni.showToast({ title: '请设置用户名', icon: 'none' });
        return;
      }
      
      if (!this.password) {
        uni.showToast({ title: '请设置密码', icon: 'none' });
        return;
      }
      
      if (this.password.length < 6 || this.password.length > 16) {
        uni.showToast({ title: '密码长度需在6-16位之间', icon: 'none' });
        return;
      }
      
      if (this.password !== this.confirmPassword) {
        uni.showToast({ title: '两次密码输入不一致', icon: 'none' });
        return;
      }
      
      // 模拟注册请求
      uni.showLoading({ title: '注册中...' });
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({ title: '注册成功', icon: 'success' });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }, 1000);
    },
    navToLogin() {
      uni.navigateBack();
    },
    showAgreement() {
      uni.showToast({ title: '用户协议内容', icon: 'none' });
    },
    showPrivacy() {
      uni.showToast({ title: '隐私政策内容', icon: 'none' });
    }
  }
};
</script>

<style scoped>
/* 基础容器 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 60rpx 30rpx 0;
  position: relative;
  overflow: hidden;
}

/* 背景装饰图案 */
.bg-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
    radial-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px);
  background-size: 40rpx 40rpx;
  background-position: 0 0, 20rpx 20rpx;
  z-index: 0;
}

/* 品牌头部 */
.brand-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50rpx;
  padding: 20rpx 0;
  width: 100%;
  position: relative;
  z-index: 1;
}

.brand-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 24rpx;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25rpx;
  box-shadow: 0 6rpx 16rpx rgba(59, 130, 246, 0.2);
  transition: all 0.3s ease;
}

.brand-icon:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 10rpx rgba(59, 130, 246, 0.15);
}

.icon {
  font-size: 60rpx;
  color: #fff;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.app-name {
  font-size: 46rpx;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8rpx;
  display: block;
  letter-spacing: 0.5rpx;
}

.page-desc {
  font-size: 26rpx;
  color: #64748b;
  letter-spacing: 0.5rpx;
}

/* 表单卡片 */
.form-card {
  width: 100%;
  max-width: 580rpx;
  background-color: #fff;
  border-radius: 24rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.04);
  padding: 10rpx;
  position: relative;
  z-index: 1;
  transition: box-shadow 0.3s ease;
}

.form-card:hover {
  box-shadow: 0 15rpx 35rpx rgba(0, 0, 0, 0.06);
}

/* 表单内容 */
.form-container {
  padding: 45rpx 35rpx;
}

.input-group {
  margin-bottom: 35rpx;
  position: relative;
}

.input-label {
  display: block;
  font-size: 28rpx;
  color: #334155;
  margin-bottom: 12rpx;
  font-weight: 500;
}

.input-field {
  width: 100%;
  height: 92rpx;
  padding: 0 25rpx;
  border: 1.5rpx solid #e2e8f0;
  border-radius: 12rpx;
  font-size: 30rpx;
  color: #0f172a;
  transition: all 0.25s ease;
  box-sizing: border-box;
  background-color: transparent;
}

.input-field::placeholder {
  color: #94a3b8;
  font-size: 28rpx;
}

.input-focused {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4rpx rgba(59, 130, 246, 0.1);
  outline: none;
}

/* 用户协议 */
.agreement {
  margin-bottom: 40rpx;
  font-size: 24rpx;
  display: flex;
  align-items: center;
}

.agreement-text {
  color: #64748b;
  margin: 0 5rpx;
}

.agreement-link {
  color: #3b82f6;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}

.agreement-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1rpx;
  width: 100%;
  height: 1rpx;
  background-color: currentColor;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.agreement-link:hover::after {
  transform: scaleX(1);
}

/* 按钮样式 */
.btn {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  font-size: 32rpx;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
  transition: all 0.25s ease;
  border: none;
  padding: 0;
}

.register-btn {
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.2);
}

.register-btn:active {
  background: linear-gradient(90deg, #3274d6 0%, #1d4ed8 100%);
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.15);
}

.btn-text {
  letter-spacing: 1rpx;
}

/* 登录链接 */
.link-container {
  display: flex;
  justify-content: center;
  font-size: 26rpx;
  color: #64748b;
  margin-top: 10rpx;
}

.link {
  color: #3b82f6;
  margin-left: 10rpx;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
  position: relative;
}

.link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1rpx;
  width: 100%;
  height: 1rpx;
  background-color: currentColor;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.link:hover::after {
  transform: scaleX(1);
}

.link:active {
  color: #2563eb;
}
</style>